jQuery মাধ্যমে ব্রাউজার উইন্ডোর সাথে ঘটে যাওয়া বিভিন্ন ইভেন্টগুলো, যেমন রিসাইজ এবং স্ক্রোল ইভেন্ট হ্যান্ডল করা যায়। এগুলি ব্যবহার করে ডিভাইস বা উইন্ডোর আকার পরিবর্তন বা স্ক্রোলিং করার সময় বিশেষ কার্যক্রম ঘটানো সম্ভব হয়। নিচে resize() এবং scroll() ইভেন্টগুলির ব্যবহার বর্ণনা করা হলো।
resize() ইভেন্ট
resize() ইভেন্ট তখন ট্রিগার হয় যখন ব্রাউজার উইন্ডোর আকার পরিবর্তন হয়। এটি ব্যবহার করে রেসপন্সিভ ডিজাইনের জন্য বিভিন্ন এলিমেন্টের আকার পরিবর্তন করা যায় বা ভিউপোর্টের পরিবর্তন অনুযায়ী কন্টেন্ট অ্যাডজাস্ট করা যায়।
উদাহরণ:
$(window).resize(function() {
var width = $(window).width();
if (width < 600) {
$("#myDiv").addClass("mobile-view");
} else {
$("#myDiv").removeClass("mobile-view");
}
});
এই কোডে, উইন্ডোর আকার 600px এর নিচে নেমে গেলে #myDiv-এ "mobile-view" ক্লাস যুক্ত হবে, এবং তার চেয়ে বড় হলে সেই ক্লাস সরে যাবে।
scroll() ইভেন্ট
scroll() ইভেন্ট উইন্ডো বা নির্দিষ্ট এলিমেন্টে স্ক্রোল করা হলে ট্রিগার হয়। এটি ব্যবহার করে স্ক্রোলের উপর নির্ভর করে বিশেষ কার্যক্রম সম্পাদন করা যায়, যেমন স্ক্রোল পজিশন অনুযায়ী ন্যাভিগেশন বারের বিহেভিয়ার পরিবর্তন।
উদাহরণ:
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > 100) {
$("#myNav").addClass("sticky");
} else {
$("#myNav").removeClass("sticky");
}
});
এই কোডে, যদি স্ক্রোল পজিশন 100px বা তার বেশি হয়, তাহলে #myNav-এ "sticky" ক্লাস যুক্ত হবে, যা ন্যাভিগেশন বারকে উপরে আটকে রাখবে।
সারাংশ
jQuery-র resize() এবং scroll() ইভেন্টগুলি উইন্ডো পরিবর্তনের সাথে সাথে ওয়েবপেজের বিভিন্ন উপাদানের আচরণ পরিবর্তন করার জন্য খুব কার্যকরী। এগুলি ব্যবহার করে ওয়েব অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও ইন্টার্যাক্টিভ এবং রেসপন্সিভ করা যায়।
Read more
